<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表</title>
    <link rel="stylesheet" href="css表.css">
    <link rel="stylesheet" href="css航.css">
    <link rel="stylesheet" href="css栏.css">


</head>
<body>
<nav class="navbar">
    <a href="index.html">主页</a>
    <a class="active" target="_blank" href="https://gitee.com/zch08029/comprehensive-task-3">Gitee仓库</a>
</nav>
<section class="card_container">
    <h1>列表</h1>
    <div class="card_box">
        <div class="card animate__animated animate__delay-1s">
            <img src="imgp1.jpg" alt="Placeholder Image">
            <div class="card-content">
                <h2 class="card-title">Card Title</h2>
                <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                    leo in
                    ipsum venenatis accumsan.</p>
            </div>
        </div>
        <div class="card animate__animated animate__delay-1s">
            <img src="imgp2.jpg" alt="Placeholder Image">
            <div class="card-content">
                <h2 class="card-title">Card Title</h2>
                <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                    leo in
                    ipsum venenatis accumsan.</p>
            </div>
        </div>
        <div class="card animate__animated animate__delay-1s">
            <img src="imgp3.jpg" alt="Placeholder Image">
            <div class="card-content">
                <h2 class="card-title">Card Title</h2>
                <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                    leo in
                    ipsum venenatis accumsan.</p>
            </div>
        </div>
        <div class="card animate__animated animate__delay-1s">
            <img src="imgp4.jpg" alt="Placeholder Image">
            <div class="card-content">
                <h2 class="card-title">Card Title</h2>
                <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                    leo in
                    ipsum venenatis accumsan.</p>
            </div>
        </div>
    </div>
    <div class="card_box">
        <div class="card animate__animated animate__delay-1s">
            <img src="imgp1.jpg" alt="Placeholder Image">
            <div class="card-content">
                <h2 class="card-title">Card Title</h2>
                <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                    leo in
                    ipsum venenatis accumsan.</p>
            </div>
        </div>
        <div class="card animate__animated animate__delay-1s">
            <img src="imgp2.jpg" alt="Placeholder Image">
            <div class="card-content">
                <h2 class="card-title">Card Title</h2>
                <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                    leo in
                    ipsum venenatis accumsan.</p>
            </div>
        </div>
        <div class="card animate__animated animate__delay-1s">
            <img src="imgp3.jpg" alt="Placeholder Image">
            <div class="card-content">
                <h2 class="card-title">Card Title</h2>
                <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                    leo in
                    ipsum venenatis accumsan.</p>
            </div>
        </div>
        <div class="card animate__animated animate__delay-1s">
            <img src="imgp4.jpg" alt="Placeholder Image">
            <div class="card-content">
                <h2 class="card-title">Card Title</h2>
                <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                    leo in
                    ipsum venenatis accumsan.</p>
            </div>
        </div>
    </div>
</section>
<section class="bottom_bar">
    <div class="bottom-container">
        <div class="left-box">
            <div class="bottom-svg-box">
                <button type="button" data-icon="wechat">
                    <svg class="icon">
                        <use href="./img/icon.svg#wechat"></use>
                    </svg>
                </button>
                <button type="button" data-icon="weibo">
                    <svg class="icon">
                        <use href="./img/icon.svg#weibo"></use>
                    </svg>
                </button>
                <button type="button" data-icon="youtube">
                    <svg class="icon">
                        <use href="./img/icon.svg#youtube"></use>
                    </svg>
                </button>
                <button type="button" data-icon="facebook">
                    <svg class="icon">
                        <use href="./img/icon.svg#facebook"></use>
                    </svg>
                </button>
            </div>
        </div>
        <div class="right-box">
            <div class="bottom-about">
                <p style="display:inline;">组员：</p>
                <span><a data-text="庄灿煌">庄灿煌</a></span>
                <span><a data-text="陈楚仁">陈楚仁</a></span>
                <span><a data-text="徐广燃">徐广燃</a></span>
                <span><a data-text="李昊天">李昊天</a></span>
                <span><a data-text="郑文鸿">郑文鸿</a></span>
                <span><a data-text="吴锦洋">吴锦洋</a></span>
            </div>
        </div>
    </div>
</section>
</body>
<script src="jscript.js"></script>
</html>